<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()"
      label-width="100px">
      <!-- <el-row :span="24">
        <el-col :span="8"> -->
      <el-form-item label="店铺名称" style="margin-left:-35px">
        <br />
        <br />
        <el-input v-model="formInline.storeName" clearable style="margin-left:-60px;width:200px"></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="法人" style="margin-left:-60px">
        <br />
        <br />
        <el-input v-model="formInline.legalPerson" clearable style="margin-left:-40px;width:200px"></el-input>
      </el-form-item>
      <!-- </el-col>
        <el-col :span="8"> -->
      <el-form-item label="手机" style="margin-left:-60px">
        <br />
        <br />
        <el-input v-model="formInline.phone" clearable style="margin-left:-40px;width:200px"></el-input>
      </el-form-item>
      <!-- </el-col> -->
      <!-- </el-row>
      <el-row :span="24">
        <el-col :span="8"> -->
      <el-form-item label="详细地址" style="margin-left:-40px">
        <br />
        <br />
        <el-input v-model="formInline.storeAddressDetail" style="margin-left:-60px;width:200px" clearable></el-input>
      </el-form-item>
      <!-- </el-col> -->

      <!-- <el-col :span="8"> -->
      <!-- <el-form-item label="状态：">
            <el-select v-model="formInline.reviewStatus" size="mini" placeholder="审核状态" clearable>
              <el-option label="全部" value></el-option>
              <el-option label="通过" value="1"></el-option>
              <el-option label="不通过" value="0"></el-option>
            </el-select>
          </el-form-item> -->
      <!-- </el-col> -->
      <!-- <el-col :span="8"> -->

      <!-- </el-col> -->

      <!-- <el-col :span="8"> -->
      <el-form-item label="所属大区" style="margin-left:-40px">
        <br />
        <br />
        <el-input v-model="formInline.upOrgZone" style="margin-left:-60px;width:200px;" clearable></el-input>
      </el-form-item>
      <br />
      <!-- </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="8"> -->

      <!-- </el-col>
            <el-col :span="8"> -->
      <el-form-item label="店铺授权编码" style="margin-left:-10px">
        <br />
        <br />
        <el-input v-model="formInline.authCode" style="margin-left:-90px;width:200px" clearable></el-input>
      </el-form-item>
      <!-- </el-col>
    

      
           <el-col :span="8"> -->
      <el-form-item label="所属营销区域" style="margin-left:-40px">
        <br />
        <br />
        <el-input v-model="formInline.baseName" style="margin-left:-60px;width:200px" clearable></el-input>
      </el-form-item>

      <el-form-item label="经销商名称" style="margin-left:-15px">
        <br />
        <br />
        <el-input v-model="formInline.companyName" clearable style="margin-left:-80px;width:200px"></el-input>
      </el-form-item>
      <el-form-item label="类型" style="margin-left:-60px">
        <br />
        <br />
        <el-select v-model="formInline.storeType" clearable style="margin-left:-40px;width:200px">
          <el-option label="全部" value></el-option>
          <el-option v-for="item in storeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" style="margin-left:-35px">
        <br />
        <br />
        <el-select v-model="formInline.reviewStatus" placeholder="全部" clearable style="margin-left:-65px;width:200px">
          <el-option label="全部" value></el-option>
          <el-option label="申请已提交" value="1"></el-option>
          <el-option label="大区初审通过" value="2"></el-option>
          <el-option label="银行审核" value="6"></el-option>
          <el-option label="大区初审不通过" value="3"></el-option>
          <el-option label="银行审核通过" value="7"></el-option>
          <el-option label="银行审核不通过" value="8"></el-option>
          <el-option label="总部复审通过" value="5"></el-option>
          <el-option label="总部复审不通过" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单客户编号">
        <br />
        <br />
        <el-input v-model="formInline.orderCustomerCode" style="margin-left:-100px;width:200px" />
      </el-form-item>
      <!-- </el-col> -->
      <!-- <el-col :span="8">
          <el-form-item></el-form-item>
        </el-col> -->
      <!-- <el-col :span="8"> -->
      <el-form-item style="margin-left:950px;text-align:right;margin-top:20px;margin-bottom:20px">
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
        <el-button type="success" @click="exportExcel()" size="mini" icon="el-icon-s-data">导出</el-button>
      </el-form-item>
      <!-- </el-col>
      </el-row> -->
    </el-form>
    <el-table :data="tableData" border v-loading="loading" height="400px" style="width: 100%;"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }">
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="storeName" label="店铺名称" align="left" width="140"></el-table-column>
      <el-table-column prop="authCode" label="店铺授权编码" align="left" width="140"></el-table-column>
      <el-table-column label="店铺类型" prop="storeType" align="left" width="120">
        <template slot-scope="scope">
          <template v-for="item in storeType">
            <span v-if="scope.row.storeType == item.value" :key="item.value">{{
              item.label
            }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="upOrgZone" label="所属大区" align="left" width="120"></el-table-column>
      <el-table-column prop="baseName" label="所属营销区域" align="left" width="120"></el-table-column>
      <el-table-column prop="companyName" label="经销商公司名" align="left" width="140"></el-table-column>
      <el-table-column prop="legalPerson" label="法人" align="left" width="120"></el-table-column>
      <el-table-column prop="legalPersonPhone" label="法人手机号" align="left" width="120"></el-table-column>
      <el-table-column prop="storeOwnerName" label="店主姓名" align="left" width="120"></el-table-column>
      <el-table-column prop="storeOwnerPhone" label="店主手机号" align="left" width="120"></el-table-column>
      <el-table-column prop="storeAddressDetail" label="店铺详细地址" align="left" width="200"></el-table-column>
      <el-table-column prop="orderCustomerCode" label="订单客户编号" align="center" :min-width="200"></el-table-column>
      <el-table-column label="审核状态" prop="storeType" align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.reviewStatus === 1">申请已提交</span>
          <span v-if="scope.row.reviewStatus === 2">初审通过</span>
          <span v-if="scope.row.reviewStatus === 3">初审不通过</span>
          <span v-if="scope.row.reviewStatus === 4">复审不通过</span>
          <span v-if="scope.row.reviewStatus === 5">复审通过</span>
          <span v-if="scope.row.reviewStatus === 6">银行审核</span>
          <span v-if="scope.row.reviewStatus === 7">银行审核通过</span>
          <span v-if="scope.row.reviewStatus === 8">银行审核不通过</span>
        </template>
      </el-table-column>
      <el-table-column label="下一步节点" prop="storeType" align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.reviewStatus === 1">大区审核</span>

          <span v-if="scope.row.merid == '' || scope.row.merid == null">
            <span v-if="
              scope.row.reviewStatus === 2 || scope.row.reviewStatus === 6
            ">银行审核</span></span>
          <span v-if="scope.row.reviewStatus === 7 || scope.row.reviewStatus === 2">总部审核</span>
          <span v-if="
            scope.row.reviewStatus === 3 ||
            scope.row.reviewStatus === 4 ||
            scope.row.reviewStatus === 8
          ">用户申请</span>

          <span v-if="scope.row.reviewStatus === 5"><span
              v-if="scope.row.number > 0 && scope.row.number !== null">信息修改完成</span><span
              v-if="scope.row.number == null">开店完成</span></span>
        </template>
      </el-table-column>
      <el-table-column label="申请类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.reviewType == 1">新建店申请</span>
          <span v-if="scope.row.reviewType == 4">工商信息变更</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="storeManagerName" label="店长姓名"></el-table-column> -->
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click="seedetail(scope.row)" type="text" size="mini">查看详情</el-button>
          <!-- <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="mini"
            v-if="
              scope.row.number > 0 && scope.row.number !== null
                ? scope.row.reviewStatus == 2 || scope.row.reviewStatus == 7
                : (scope.row.reviewStatus == 2 &&
                    scope.row.icbcReviewStatus == 1) ||
                  scope.row.reviewStatus == 7
            "
            >审核</el-button
          > -->
          <el-button @click="handleClick(scope.row)" type="text" size="mini" v-if="
            scope.row.number > 0 &&
            scope.row.number !== null &&
            scope.row.reviewStatus == 7
          ">审核</el-button>

          <!-- <el-button @click="handledelete(scope.row)" type="text" size="mini">退回</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="总部审核意见" :visible.sync="dialogVisible" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="大区意见">
          <el-input type="textarea" v-model="reviewOpinion" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="是否通过" prop="reviewStatus" style="margin:20px 0">
          <el-select v-model="ruleForm.reviewStatus">
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="复审意见" prop="finalReviewOpinion">
          <el-input type="textarea" v-model="ruleForm.finalReviewOpinion" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleorg" width="37%" style="height:1500px">
      <div>
        <el-tree
          :data="data"
          ref="tree"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check-change="handleCheckChange"
          check-strictly
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" size="mini">确定分配权限</el-button>
      </span>
    </el-dialog>-->
    <div class="block" style="margin-top:2px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  rolemanage,
  usebutton,
  rolemanagetwo,
  addrole,
  deleterole,
  updaterole,
  getshu,
  setlimit,
} from '@/api/platformmanage';
import { getmemberorg } from '@/api/organaz';
import { getStoreRewExcel } from '@/api/download';
import {
  queryUserReviewInfo,
  finalReview,
  storeFinalReview,
} from '@/api/addShopapply';
import qs from 'qs';
import { dict } from '../../dict';

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
      },
      reviewOpinion: '',
      ruleForm: {
        reviewStatus: '',
        finalReviewOpinion: '',
      },
      total: 0,
      data: [],

      loading: true,
      dialogVisibleorg: false,
      formInline: {
        storeName: '',
        reviewStatus: '',
        storeType: '',
        authCode: '',
        companyName: '',
        baseName: '',
        upOrgZone: '',
        legalPerson: '',
        phone: '',
        storeAddressDetail: '',
        reviewStatus: '',
        orderCustomerCode: '',
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: '',
      rolefenid: '',
      selected: {},
      ruleForm: {
        name: '',
        region: '',
        sec: '',
        desc: '',
        state: '',
      },
      orgList: {},
      uuid: '',
      checkedarr: [],
      roleid: '',
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,

      arrone: [],

      rules: {
        reviewStatus: [
          { required: true, message: '请选择总部审核意见', trigger: 'blur' },
        ],
        finalReviewOpinion: [
          { required: true, message: '请输入复审意见', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    storeType: () => dict.storeType,
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');

    this.orgList = JSON.parse(this.logininfo).orgList;
    if (this.$route.params.formInline != undefined) {
      this.formInline = this.$route.params.formInline;
    }
    this._queryUserReviewInfo();
    // this.getrolemanage();
  },
  methods: {
    exportExcel() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          storeName: this.formInline.storeName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          authCode: this.formInline.authCode,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          upOrgSeq: this.orgList[0].orgSeq,
        },
        ascs: [],
        descs: [],
      };
      getStoreRewExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '总部审核店铺列表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    kong() {
      this.formInline.storeName = '';
      this.formInline.storeType = '';
      this.formInline.authCode = '';
      this.formInline.companyName = '';
      this.formInline.baseName = '';
      this.formInline.upOrgZone = '';
      this.formInline.legalPerson = '';
      this.formInline.storeAddressDetail = '';
      this.formInline.phone = '';
      this.formInline.storeAddressDetail = '';
      this.formInline.reviewStatus = '';
      this.formInline.orderCustomerCode = '';
    },
    seedetail(v) {
      this.$router.push({
        name: 'infoCaterMerchantscopy',
        params: {
          v: v,
          shen: true,
        },
      });
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: {
          storeName: this.formInline.storeName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          authCode: this.formInline.authCode,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          upOrgSeq: this.orgList[0].orgSeq,
          orderCustomerCode: this.formInline.orderCustomerCode,
        },
        ascs: [],
        descs: [],
      };
      queryUserReviewInfo(data).then((res) => {
        (this.loading = false), (this.tableData = res.records);

        this.total = res.total;
        console.log(res, 'ppe');
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this._queryUserReviewInfo();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this._queryUserReviewInfo();
    },

    confirmEdit(v) {
      if (
        this.ruleForm.reviewStatus == '' ||
        this.ruleForm.reviewStatus == null
      ) {
        this.$message.error('请选择总部审核意见');
        return;
      }
      if (
        this.ruleForm.finalReviewOpinion == '' ||
        this.ruleForm.finalReviewOpinion == null
      ) {
        this.$message.error('请输入复审意见');
        return;
      }
      let data = {
        uuid: this.uuid,
        reviewStatus: this.ruleForm.reviewStatus,
        finalReviewOpinion: this.ruleForm.finalReviewOpinion,
      };

      if (this.reviewTypeflag === true) {
        finalReview(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
          this.dialogVisible = !this.dialogVisible;
          this._queryUserReviewInfo();
        });
      } else if (this.reviewTypeflag === false) {
        storeFinalReview(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
          this.dialogVisible = !this.dialogVisible;
          this._queryUserReviewInfo();
        });
      }
    },

    handleClick(v) {
      //   if (v.reviewType == 1) {
      //     this.reviewTypeflag = true;
      //   } else if (v.reviewType == 2) {
      //     this.reviewTypeflag = false;
      //   }
      //   this.reviewOpinion = v.reviewOpinion;
      //   this.uuid = v.uuid;
      //   this.dialogVisible = !this.dialogVisible;
      this.$router.push({
        name: 'infoCaterMerchantscopy',
        params: {
          v: v,
          shen: true,
          shenhe: false,
          formInline: this.formInline,
        },
      });
    },
    _queryUserReviewInfo() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          storeName: this.formInline.storeName,
          legalPerson: this.formInline.legalPerson,
          phone: this.formInline.phone,
          storeAddressDetail: this.formInline.storeAddressDetail,
          reviewStatus: this.formInline.reviewStatus,
          storeType: this.formInline.storeType,
          authCode: this.formInline.authCode,
          companyName: this.formInline.companyName,
          baseName: this.formInline.baseName,
          upOrgZone: this.formInline.upOrgZone,
          upOrgSeq: this.orgList[0].orgSeq,
        },
        ascs: [],
        descs: [],
      };
      queryUserReviewInfo(data).then((res) => {
        (this.loading = false), (this.tableData = res.records);
        this.total = res.total;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 0px;
}

.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}

.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}

.el-form-item {
  margin-bottom: 0px;
}

.el-row {
  margin-bottom: 0px;
}
</style>
